<template>
    <div class="activity">
        <el-form :label-position="labelPosition" label-width="80px" :model="formActivity">
            <el-form-item label="活动名称" required>
                <el-input v-model="formActivity.name" style="width:40%;" placeholder="请输入活动名称"></el-input>
                <span style="margin-left:20px;margin-right:20px;">选择水印</span>
                <el-radio class="radio" v-model="radio" label="1">公司logo</el-radio>
                <el-radio class="radio" v-model="radio" label="2">公众号二维码</el-radio>
            </el-form-item>
            <el-form-item label="开始时间" required>
                <el-date-picker v-model="start_date" type="date" style="width:40%;"></el-date-picker>
                <el-time-select v-model="start_time" style="width:40%;margin-left:20px;"></el-time-select>
            </el-form-item>
            <el-form-item label="观看权限">
                <el-select v-model="select_power" style="width:40%;">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" style="width:100%;padding:0;margin:0;text-indent:20px;height:40px;line-height:40px;"></el-option>
                </el-select>
                <el-input v-model="formActivity.money" style="width:40%;margin-left:20px;"></el-input>
                <span style="margin-left:10px;">元</span>
            </el-form-item>
            <el-form-item label="活动简介">
                <el-input type="textarea" :rows="6" v-model="formActivity.actAbsolute" style="width:83%;"></el-input>
            </el-form-item>
            <el-form-item label="主播名字">
                <el-input v-model="formActivity.pName" style="width:40%;"></el-input>
            </el-form-item>
            <el-form-item label="主播介绍">
                <el-input type="textarea" :rows="6" v-model="formActivity.pAbsolute" style="width:83%;"></el-input>
            </el-form-item>
            <el-form-item label="设置投票">
                <el-input v-model="formActivity.setter" style="width:40%;"></el-input>
                <el-select v-model="valueChoose" multiple filterable allow-create placeholder="双击添加选项" style="width:40%;margin-left:20px;">
                    <el-option v-for="item in options5" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="结束投票时间" required>
                <el-date-picker v-model="end_date" type="date" style="width:40%;"></el-date-picker>
                <el-time-select v-model="end_time" style="width:40%;margin-left:20px;"></el-time-select>
            </el-form-item>
            <el-button type="primary" style="width:40%;">+&nbsp;&nbsp;&nbsp;&nbsp;添加更多投票</el-button>
            <el-form-item label="设置问卷" style="margin-top:15px;">
                <el-input v-model="formActivity.qName" placeholder="请在此输入问卷名字" style="width:40%;"></el-input>
                <el-button type="primary" style="width:20%;margin-left:20px;" @click="createQuestion = true">编辑问卷</el-button>
            </el-form-item>
            <el-form-item label="问卷结束时间">
                <el-date-picker v-model="end_date" type="date" style="width:40%;"></el-date-picker>
                <el-time-select v-model="end_time" style="width:40%;margin-left:20px;"></el-time-select>
            </el-form-item>
            <el-button type="primary" style="width:40%;">+&nbsp;&nbsp;&nbsp;&nbsp;添加更多投票</el-button>
            <el-form-item label="一键抢购" style="margin-top:15px;">
                <el-input v-model="formActivity.buy" placeholder="请在此输入购物地址" style="width:83%;"></el-input>
            </el-form-item>
            <el-button type="primary" style="width:40%;">创建直播</el-button>
        </el-form>
        <el-dialog v-model="createQuestion" size="tiny" style="text-align:left;float:left;margin-left:-300px;width:160%;">
            <el-form :model="editorQuestion" ref="editorQuestion" label-width="0px" class="demo-ruleForm">
                <el-form-item prop="chooseType">
                    <el-button type="primary" style="width:80px;">单选</el-button>
                    <el-button type="primary" style="width:80px;background:#F1F1F1;border-color:#F1F1F1;color:black;">多选</el-button>
                    <el-button type="primary" style="width:80px;background:#F1F1F1;border-color:#F1F1F1;color:black;">填空</el-button>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <span>(点击题目类型即可创建问卷问题哦~)</span>
                </el-form-item>
                <hr>
                <el-form-item prop="choose">
                    <p>1.请问你多久下楼买一次零食</p>
                    <el-radio class="radio" v-model="radio2" label="1">每天</el-radio><br>
                    <el-radio class="radio" v-model="radio2" label="2">两天一次</el-radio><br>
                    <el-radio class="radio" v-model="radio2" label="3">从不</el-radio>
                </el-form-item>
                <el-form-item prop="question1" style="border-radius:5px;background:#F1F1F1;">
                    <table>
                        <tr>
                            <td style="width:100px;">请输入题目：</td>
                            <td style="width:200px;"><el-input type="text" v-model="title1" auto-complete="off" style="width:170px;"></el-input></td>
                            <td>
                                <el-radio class="radio" v-model="radio3" label="1">必填</el-radio>
                                <span style="color:#62ACF4;margin-left:20px;">当前题型：必选题</span>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><el-input type="text" v-model="choose1_1" auto-complete="off" style="width:170px;" placeholder="选项一"></el-input></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><el-input type="text" v-model="choose1_2" auto-complete="off" style="width:170px;" placeholder="选项二"></el-input></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td style="font-size:12px;">
                                最少选
                                <select v-model="valueMin" style="width:40px;">
                                    <option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></option>
                                </select>
                                项&nbsp;&nbsp;&nbsp;&nbsp;最多选
                                <select v-model="valueMax">
                                    <option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></option>
                                </select>
                                项
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <el-button type="primary" style="width:80px;">取消</el-button>
                                <el-button type="primary" style="width:80px;background:#38ACB5;border-color:#38ACB5;">确定</el-button>
                            </td>
                            <td></td>
                        </tr>
                    </table>
                </el-form-item>
                <el-form-item prop="question2" style="border-radius:5px;background:#F1F1F1;">
                    <table>
                        <tr>
                            <td style="width:100px;">请输入题目：</td>
                            <td style="width:200px;"><el-input type="text" v-model="title1" auto-complete="off" style="width:170px;"></el-input></td>
                            <td>
                                <el-radio class="radio" v-model="radio4" label="1">必填</el-radio>
                                <span style="color:#62ACF4;margin-left:20px;">当前题型：必选题</span>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><el-input type="text" v-model="choose1_1" auto-complete="off" style="width:170px;" placeholder="请填空"></el-input></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <el-button type="primary" style="width:80px;">取消</el-button>
                                <el-button type="primary" style="width:80px;background:#38ACB5;border-color:#38ACB5;">确定</el-button>
                            </td>
                            <td></td>
                        </tr>
                    </table>
                </el-form-item>
                <el-form-item prop="submitQuestion" style="padding-left:100px;">
                    <el-button type="primary" style="width:80px;background:#38ACB5;border-color:#38ACB5;">提交问卷</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                labelPosition: 'top',
                radio: '1',
                start_date: '2017-01-05',
                start_time: '14:00',
                select_power: '收费观看',
                select_setter: '',
                end_date: '2017-01-08',
                end_time: '14:00',
                options:[
                    {value:'选项0',label:'所有方式'},
                    {value:'选项1',label:'收费1'},
                    {value:'选项2',label:'收费2'},
                    {value:'选项3',label:'收费3'},
                    {value:'选项4',label:'收费4'},
                ],
                formActivity: {
                    name: '',
                    money: '',
                    actAbsolute: '',
                    pName: '',
                    pAbsolute: '',
                    setter: '',
                    qName: '',
                    buy: ''
                },
                options5:[],
                valueChoose: [],
                createQuestion: false,
                editorQuestion: {
                    chooseType: '',
                    choose: '',
                    question1: '',
                    question2: ''
                },
                radio2: '1',
                title1: '',
                radio3: '',
                choose1_1: '',
                choose1_2: '',
                valueMin: '',
                valueMax: '',
                radio4: '',
                options2:[
                    {value:'1',label:'1'},
                    {value:'2',label:'2'},
                    {value:'3',label:'3'},
                    {value:'4',label:'4'},
                ],
                submitQuestion: '',
            };
        },
        methods: {
        }
    }
</script>

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .activity{
        width: 65%;
        margin-top: 100px;
        margin-left: 105px;
        margin-bottom: 40px;
        text-align: left;
    }
</style>